<template>
  <div class="mainContainer">
    <div class="topCardData">
      <el-row :gutter="20">
        <template v-if="loading">
          <el-col
            :span="6"
            :offset="0"
            v-for="(item, index) in homeData"
            :key="index"
          >
            <el-skeleton animated loading>
              <template #template>
                <el-card shadow="hover" class="dataCard">
                  <template #header>
                    <div class="cardTitle">
                      <el-skeleton-item variant="text" style="width: 50%" />
                      <el-skeleton-item variant="text" style="width: 10%" />
                    </div>
                  </template>
                  <div class="cardBody">
                    <el-skeleton-item variant="h3" style="width: 80%" />
                  </div>

                  <div class="cardFooter">
                    <el-skeleton-item variant="text" style="width: 40%" />
                    <el-skeleton-item variant="text" style="width: 40%" />
                  </div>
                </el-card>
              </template>
            </el-skeleton>
          </el-col>
        </template>

        <template v-else>
          <el-col
            :span="6"
            :offset="0"
            v-for="(item, index) in homeData"
            :key="index"
          >
            <el-card shadow="hover" class="dataCard">
              <template #header>
                <div class="cardTitle">
                  <div class="title">{{ item.title }}</div>
                  <el-tag class="tag" :type="item.unitColor" effect="plain">
                    {{ item.unit }}
                  </el-tag>
                </div>
              </template>
              <div class="cardBody">
                <count-animate :num="item.value" />
              </div>

              <div class="cardFooter">
                <div class="footerLeft">{{ item.subTitle }}</div>
                <div class="footerRight">
                  {{ item.subValue
                  }}<span class="unitClass">{{
                    item.subTitle != "转化率" ? item.unit : "%"
                  }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </template>
      </el-row>
    </div>

    <div class="middleBox">
      <cards-line :span="3" :data="catsData" @cardClick="cardClick" />
    </div>

    <div class="bottomChartBox">
      <el-row :gutter="20" class="chartBox">
        <el-col :span="12" :offset="0" class="leftBox">
          <!--在缓存中查询ruleNames，角色接口权限列表中是否存在该（v-permission）中指定的权限，如果没有，则不显示该组件-->
          <home-chart
            ref="homeChartRef"
            @changeChartType="changeChartType"
            v-permission="['statistic/homeChart']"
          ></home-chart>
        </el-col>
        <el-col :span="12" :offset="0" class="rightBox">
          <cards-lines ref="cardsLinesRef" :span="6" :data="productsProps"></cards-lines>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  onBeforeUnmount,
} from "vue";

import api from "@/api/statistic";

import { useHome } from "./home";

const proxy = getCurrentInstance().proxy;
// proxy.$messageInfo.toast.success("欢迎进入首页")
const {
  loading,
  homeData,
  getHomeData,
  countAnimate,
  cardsLine,
  catsData,
  cardClick,
  homeChart,
  homeChartRef,
  chartProps,
  changeChartType,
  cardsLines,
  cardsLinesRef,
  productsProps,
} = useHome();
</script>

<style lang="scss" scoped>
@use "@/common";
@use "./home.scss";
</style>